<template>
	<!-- 首页-店铺-评价 -->
	<view class="evaluatePage">
		<view class="topContent">
			<view class="titleList" v-for="(v,i) in titleList" :key="i">
				{{v}}
			</view>
			
		</view>
		<view class="titleItem">
			<view class="">
				<!-- 4.5 -->
				{{arr.shop_desccredit}}
			</view>
			<view class="weidao">
				<!-- 4.5 -->
				{{arr.shop_servicecredit}}
			</view>
			<view class="deliverySatisfaction">
				<!-- 99.5% -->
				{{arr.shop_deliverycredit}}
			</view>
		</view>
		<view class="navbar">
			<!-- <view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				全部
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				带图
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				好评
			</view>
			<view class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
				差评
			</view> -->
			<view class="nav-item" :class="{current: filterIndex === index}" v-for="(item,index) in navbar" :key="index" @click="tabClick(index)">
				{{item}}
			</view>
		</view>
		<view class="goods-list">
			<view v-for="(item, index) in shopEvaluateList" :key="item.evaluate_id" class="goods-item">
				<view class="image-wrapper">
					<image :src="$image + item.member_headimgs" mode="aspectFill"></image>
				</view>
				<view class="price-box">
					<view class="topBox">
						<text class="title clamp">{{item.is_anonymous == 1 ? '匿名' : item.member_name}}</text>
						<text class="time clamp">{{item.time}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<uni-rate :value="item.scores" color="#bbb" active-color="#F14500" :allowHalf="true" :readonly="true" size="28rpx" />
						&ensp;
						<text>{{item.scores}}</text>
					</view>
					<text class="text">{{item.content}}</text>
					<view class="imageGust" v-if="item.images">
						<image :src="$image + item.images" mode="aspectFill"></image>
					</view>
					<view class="price_bottom" v-if="item.explain_first != ''">
						<text class="busShop">商家回复：</text>
						<!-- <text class="gust">亲爱的顾客，感谢您选择品尝本店的</text> -->
						<text class="gust">{{item.explain_first}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue';
	const $api = require('@/utils/request.js').API
	export default {
		props: ['arr'],
		data() {
			return {
				titleList:['综合评分','味道','配送满意度'],
				navbar: ['全部','带图','好评','差评'],
				filterIndex: 0, 
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"100px",
				loadingType: 'more', //加载更多状态
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				// imagehaocha: 0,
				imagehaocha: [],
				shopEvaluateList: [],
				list: [],
				page: 1,
				page_count: 0,
				$image: this.$image,
			}
		},
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			this.loadCateList(options.fid,options.sid);
			this.loadData();
		},
		created() {
			this.evaluateList()
			this.shopEvaluate()
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
			this.page = this.page + 1
			if(this.page >= this.page_count) {
				this.status = 'nomnre'
			} else this.evaluateList()
		},
		components: {
			uniLoadMore
		},
		methods: {
			// 评价列表
			evaluateList(){
				$api.postShopEvaluateList({
					site_id: this.arr.site_id,
					page:this.page
				}).then(res => {
					if(res.data.code == 0) {
						this.shopEvaluateList = res.data.data.list
						this.page_count = res.data.data.page_count
						this.list = res.data.data.list
						// this.imagehaocha[0] = res.data.data.count
					}
				})
			},
			// 评价数量
			shopEvaluate(type){
				$api.postShopEvaluate({
					site_id: this.arr.site_id,
					type: type
				}).then(res => {
					this.imagehaocha.push(res.data.data)
				})
			},
			//筛选点击
			tabClick(index){
				this.filterIndex = index;
				if(index == 0) {
					this.evaluateList()
				} else if(index == 1) {
					let obj = [...this.list]
					this.shopEvaluateList = obj.filter(item => item.images != '')
					// this.evaluateList()
				} else if(index == 2) {
					let obj = [...this.list]
					this.shopEvaluateList = obj.filter(item => item.explain_type === 1)
				} else if(index == 3) {
					let obj = [...this.list]
					this.shopEvaluateList = obj.filter(item => item.explain_type === 3)
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//加载分类
			async loadCateList(fid, sid){
				let list = await this.cateList;
				let cateList = list.filter(item=>item.pid == fid);
				
				cateList.forEach(item=>{
					let tempList = list.filter(val=>val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				let goodsList = await this.goodsList;
				if(type === 'refresh'){
					this.goodsList = [];
				}
				//
				if(this.filterIndex === 1){
					goodsList.sort((a,b)=>b.sales - a.sales)
				}
				if(this.filterIndex === 2){
					goodsList.sort((a,b)=>{
						if(this.priceOrder == 1){
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}
				
				this.goodsList = this.goodsList.concat(goodsList);
				
				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="less">
	.evaluatePage{
		display: flex;
		flex-direction: column;
		height:auto;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	
.topContent,.titleItem{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0 106rpx 0 40rpx;
	
}
.titleList{
	height: 102rpx;
	line-height: 102rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #3C3832;
}
.titleItem{
	margin-bottom: 35rpx;
	height: 54rpx;
	line-height: 54rpx;
	font-size: 40rpx;
	font-weight: 500;
	color: #F14500;
}


page, .content{
		background: #fff;
	}
	.content{
		padding-top: 96rpx;
	}

	.navbar{
		// position: fixed;
		// left: 0;
		// top: var(--window-top);
		display: flex;
		padding-left: 30rpx;
		height: 80rpx;
		background: #fff;
		// box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);
		z-index: 10;
		.nav-item{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
			background: #F5F5F5;
			width: 100rpx;
			height: 44rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #161415;
			position: relative;
			&.current{
				background:#E54100;
				color: #fff;
			
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 14rpx;
				line-height: 1;
				margin-left: 4rpx;
				font-size: 26rpx;
				color: #888;
				&.active{
					color: #000;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80rpx;
			position: relative;
			font-size: 44rpx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36rpx;
			}
		}
	}

	/* 分类 */
	.cate-mask{
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 95;
		transition: .3s;
		
		.cate-content{
			width: 630rpx;
			height: 100%;
			background: #fff;
			float:right;
			transform: translateX(100%);
			transition: .3s;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.cate-content{
				transform: translateX(0);
			}
		}
	}
	.cate-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		.cate-item{
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-left: 30rpx;
 			font-size: 28rpx;
			color: #555;
			position: relative;
		}
		.two{
			height: 64rpx;
			color: #303133;
			font-size: 30rpx;
			background: #f8f8f8;
		}
		.active{
			color: #f00;
		}
	}

	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 30rpx 30rpx;
		background: #fff;
		.goods-item{
			display:flex;
			padding-bottom: 40rpx;
			width: 100%;
			border-bottom: 1px solid #EEEDE9;
			padding-top: 30rpx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 125rpx;
			height: 125rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		
		.topBox{
			display: flex;
			justify-content: space-between;
			width: 100%;
		}
		.title{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3C3832;
		}
		.time{
			font-size: 22rpx;
			font-weight: 400;
			color: #C3B9AB;
		}
		.text{
			// min-height: 77rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3C3832;
			// line-height: 48rpx;
		}
		.price-box{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			margin-left: 13rpx;
			padding-right: 10rpx;
			font-size: 24rpx;
			color: #000;
		}
		.price{
			font-size: 32rpx;
			color: #000;
			line-height: 1;
			&:before{
				content: '￥';
				font-size: 26rpx;
			}
		}
		.imageGust{
			// margin: 33rpx 0;
			margin: 20rpx 0;
			width: 407rpx;
			height: 216rpx;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.price_bottom{
			display: flex;
			// justify-content: center;
			align-items: center;
			width: 556rpx;
			// height: 80rpx;
			background: #FFFBEB;
			border-radius: 6rpx;
			font-weight: 400;
			padding: 20rpx 0 20rpx 20rpx;
			.busShop{
				font-size: 24rpx;
				color: #3C3832;
			}
			.gust{
				font-size: 24rpx;
				color: #C3B9AB;
			}
		}
	}
	

</style>
